<template>
  <h2>生命周期</h2>
  <p>{{ count }}</p>
  <p>{{ num }}</p>
</template>

<script>
import { onMounted, onUpdated, onUnmounted, ref } from "vue";

export default {
  setup() {
    // 1. 创建阶段的生命周期没有了 beforeCreate和created
    // 如果想在创建阶段做事情，直接写在setup里面就可以了

    // 2. 其他的生命周期就是前面加一个on, mounted -> onMounted
    // 里面都是传入回调函数
    // 生命周期就都可以多次调用了
    onMounted(() => {
      console.log("onMounted");
    });

    onMounted(() => {
      console.log("onMounted2");
    });

    onMounted(() => {
      console.log("onMounted3");
    });

    // onUnmounted(() => {
    //   clearInterval(timer)
    // })

    const count = ref(3);

    return { count };
  },
  // data() {
  //   return {
  //     num: 10,
  //   };
  // },
};
</script>
